import React from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  Alert,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';


const App = () => {
  const navigation = useNavigation();

  return (
    // 在安全可视区域内渲染内容，为导航栏和刘海流出空间。针对iOS 
    <SafeAreaView style={styles.mainContainer}>
      //状态栏
      <StatusBar
        barStyle={'dark-content'}
        backgroundColor={styles.mainContainer.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic">
        <View>
          <Text style={styles.titleText}>
            主界面
          </Text>
          <Text style={styles.labelText}>
            线路列表
          </Text>
          <Text style={styles.labelText}>
            个人坦克
          </Text>
          <View style={styles.buttonContainer} >;
            <Button
              title='个人坦克'
              color='skyblue'
              onPress={() => navigation.navigate('Local')}
            />
          </View>

        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,//主轴比例(副轴铺满)
    justifyContent: 'center',//主轴内对齐
    padding: 16,//间距
    backgroundColor: "white",
  },
  titleText: {
    textAlign: 'center',//对齐
    marginVertical: 20,
    fontSize: 20,
    fontWeight: 'bold',
  },
  labelText: {
    textAlign: 'center',
    fontSize: 16,
    marginVertical: 20,
  },
  buttonContainer: {
    marginHorizontal: 20,
    marginVertical: 20,
  },
  separatorView: {//分隔符
    marginVertical: 20,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;
